html,
body {
    margin: 0;
    width: 100%;
    height: 100%
}

body {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

.snow-container {
    position: absolute;
    width: 400px;
    height: 550px;
    color: white;
}

@media screen and (max-width: 450px) {
    .snow-container {
        width: 100%;
    }
}

.snow-box {
    position: relative;
    width: 100%;
    height: 100%;
}

.snow {
    position: absolute;
    animation: 5s snow linear infinite;
}

@keyframes snow {
    0% {
        left: 0;
        top: 0
    }
    80% {
        top: 90%
    }
    100% {
        top: 90%
    }
}

.snow2 {
    left: 5%;
    top: 2%;
    position: absolute;
    animation: 10s snow2 ease-in infinite;
}

@keyframes snow2 {
    0% {
        left: 5%;
        top: 2%;
    }
    80% {
        top: 90%
    }
    100% {
        top: 90%
    }
}

.snow3 {
    left: 10%;
    top: 8%;
    position: absolute;
    animation: 8s snow3 ease-out infinite;
}

@keyframes snow3 {
    0% {
        left: 5%;
        top: 2%;
    }
    80% {
        top: 90%
    }
    100% {
        top: 90%
    }
}

.snow4 {
    left: 18%;
    top: 18%;
    position: absolute;
    animation: 7s snow4 ease-out infinite;
}

@keyframes snow4 {
    0% {
        left: 18%;
        top: 18%;
    }
    80% {
        top: 90%
    }
    100% {
        top: 90%
    }
}

.snow5 {
    left: 59%;
    top: 1%;
    position: absolute;
    animation: 6s snow4 ease infinite;
}

@keyframes snow5 {
    0% {
        left: 75%;
        top: 18%;
    }
    80% {
        top: 90%
    }
    100% {
        top: 90%
    }
}

.snow6 {
    left: 65%;
    top: 5%;
    position: absolute;
    animation: 6s snow6 ease-in infinite;
}

@keyframes snow6 {
    0% {
        left: 75%;
        top: 18%;
    }
    80% {
        top: 90%
    }
    100% {
        top: 90%
    }
}

.snow7 {
    left: 75%;
    top: 18%;
    position: absolute;
    animation: 11s snow5 ease infinite;
}

@keyframes snow7 {
    0% {
        left: 75%;
        top: 18%;
    }
    80% {
        top: 90%
    }
    100% {
        top: 90%
    }
}

.snow8 {
    left: 90%;
    top: 40%;
    position: absolute;
    animation: 5s snow8 ease-out infinite;
}

@keyframes snow8 {
    0% {
        left: 90%;
        top: 20%;
    }
    80% {
        top: 90%
    }
    100% {
        top: 90%
    }
}

.snow9 {
    left: 50%;
    top: 10%;
    position: absolute;
    animation: 5s snow9 ease-out infinite;
}

@keyframes snow9 {
    0% {
        left: 85%;
        top: 20%;
    }
    80% {
        left: 50%;
        top: 90%
    }
    100% {
        top: 90%
    }
}

.snow10 {
    left: 100%;
    top: 10%;
    position: absolute;
    animation: 7s snow10 ease infinite;
}

@keyframes snow10 {
    0% {
        left: 100%;
        top: 10%;
    }
    80% {
        left: 50%;
        top: 90%
    }
    100% {
        left: 50%;
        top: 90%
    }
}

.text {
    font-size: 40px;
    color: #f1ebe5;
    text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    position: absolute;
    white-space: nowrap;
    left: 50%;
    transform: translate(-50%, -50%);
}